@mixin text($color: black, $size: 16px) {
  color: $color;
}

@mixin scrollbar() {
  // scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
  }
}

.dialog {
  --el-dialog-padding-primary: 0px; // 弹窗内边距
}

.el-drawer {
  margin-top: 70px;
  height: 92% !important;
}

.el-drawer__header {
  margin-bottom: 10px;
  padding: 0px;
}

.el-drawer__body {
  @include scrollbar();
  padding: 0px 0px 0px 0px;
}
.el-drawer__close{
  font-size: var(--dialog-icon-close-size) !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 50% !important;
}
.el-dialog__headerbtn {
  .el-dialog__close {
    font-size: var(--dialog-icon-close-size) !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 50% !important;
  }
}

.btns {
  display: flex;
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid #9a9a9a1e;
  padding: 10px;

  .btn {
    font-size: var(--dialog-title-font-size);
    color: #fff;
  }

  .active {
    position: relative;
    font-weight: bold;
    font-size: var(--dialog-title-font-size-actvie);

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background-color: #fff;
      position: absolute;
      bottom: -5px;
    }

    // color: rebeccapurple;
  }
}

.content {
  font-size: var(--dialog-content-font-size);
  padding: 10px;
  color: #fff;
}

/* 使用深度选择器穿透scoped */
.container :deep(canvas),
.container :deep(.css2),
.container :deep(.css3) {
  width: 100% !important;
  height: 100% !important;

  // ///////////////////////////////////////
  .disasterPoints,
  .introduce {
    transform-origin: 50% 50%;
    /* 将变换原点设置为元素中心 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .text {
      opacity: 1;
      color: #fff;
      font-size: var(--three-tubiaojieshao-font-size);
      pointer-events: auto !important;
    }

    .img {
      margin-top: 5px;
      width: var(--three-tubiaojieshao-w);
      height: var(--three-tubiaojieshao-h);
      cursor: pointer;
      pointer-events: auto !important;
    }
  }

  .road {
    display: flex;
    align-items: center;

    .img {
      pointer-events: auto !important;
      display: none;
      width: var(--three-zaihaidian-w);
      height: var(--three-zaihaidian-h);
      cursor: pointer;
    }

    .text {
      font-weight: bold;
      color: #fff;
      font-size: var(--three-zaihaidian-font-size);
      transform: rotate(1deg);
      // 调整文字倾斜的原点
      transform-origin: center bottom; // 设置原点为元素的左上角
    }
  }

  .monitoring {
    pointer-events: auto !important;
    transform: translate(-50%, -50%);

    .text {
      opacity: 0;
      color: #fff;
      font-size: var(--three-jiankong-font-size);
      pointer-events: auto !important;
    }

    .img {
      width: var(--three-jiankong-w);
      ;
      height: var(--three-jiankong-h);
    }
  }

  .card {
    pointer-events: auto !important;
    width: var(--three-card-w);
    height: var(--three-card-h);
    transform: translate(-50%, -50%);
    cursor: pointer;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .cardPopup {
    background: var(--el-bg-color);
    border-radius: 10px;
    padding: 10px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: var(--three-card-title-font-size);
        color: #fff;
        font-weight: bold;
      }

      .close {
        width: var(--three-caed-close-w-h);
        height: var(--three-caed-close-w-h);
        pointer-events: auto !important;
        cursor: pointer;

        border: 1px solid #fff !important;
        border-radius: 50% !important;
      }
    }



    .content1 {
      .item {
        span {
          font-size: var(--three-card-font-size);
          color: #fff;
        }
      }
    }
  }
}


.desc {
  // 弹窗中的描述 如 江边饭店   金沙江饭店等插槽中的描述
  margin-top: 10px;
  font-size: var(--dialog-content-font-size);
  max-height: 55vh;
  overflow: auto;
  @include scrollbar();

  .img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }

  .text {
    text-indent: 1em;
    margin-bottom: 5px;
  }
}